<template>
  <div class="dashboard-container">
    <!-- 顶部数据卡片 -->
    <div class="top-cards">
      <div class="card voltage-card">
        <div class="card-icon">
          <img src="/images/dydj.png" alt="电压等级" />
        </div>
        <div class="card-content">
          <div class="card-title">电压等级</div>
          <div class="card-value">
            <CountTo :endVal="10" suffix="kV" :duration="2000" />
          </div>
        </div>
      </div>

      <div class="card transformer-card">
        <div class="card-icon">
          <img src="/images/byq.png" alt="变压器台数" />
        </div>
        <div class="card-content">
          <div class="card-title">变压器台数</div>
          <div class="card-value">
            <CountTo :endVal="3" suffix="台" :duration="2000" />
          </div>
        </div>
      </div>

      <div class="card capacity-card">
        <div class="card-icon">
          <img src="/images/zjrl.png" alt="装机容量" />
        </div>
        <div class="card-content">
          <div class="card-title">装机容量</div>
          <div class="card-value">
            <CountTo :endVal="2860" suffix="kVA" :duration="2000" />
          </div>
        </div>
      </div>

      <div class="card running-card">
        <div class="card-icon">
          <img src="/images/rxrl.png" alt="运行容量" />
        </div>
        <div class="card-content">
          <div class="card-title">运行容量</div>
          <div class="card-value">
            <CountTo :endVal="2860" suffix="kVA" :duration="2000" />
          </div>
        </div>
      </div>

      <div class="card power-card">
        <div class="card-icon">
          <img src="/images/yggl.png" alt="有功功率" />
        </div>
        <div class="card-content">
          <div class="card-title">有功功率</div>
          <div class="card-value">
            <CountTo
              :endVal="481.2"
              suffix="kW"
              :decimals="2"
              :duration="2000"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 中间内容区域 -->
    <div class="middle-content">
      <!-- 左侧图表区域 -->
      <div class="left-charts">
        <!-- 当日用电量环比 -->
        <div class="chart-container">
          <div class="chart-header">
            <h3>当日用电量环比</h3>
            <p>实时电量(单位 kWh)</p>
          </div>
          <div class="chart-content">
            <div ref="consumptionChart" class="chart"></div>
          </div>
        </div>

        <!-- 有功功率 -->
        <div class="chart-container">
          <div class="chart-header">
            <h3>有功功率</h3>
            <p>实时功率(单位kW)</p>
          </div>
          <div class="chart-content">
            <div ref="powerChart" class="chart"></div>
          </div>
        </div>
      </div>

      <!-- 右侧统计面板 -->
      <div class="right-panel">
        <!-- 数据统计 -->
        <div class="stats-panel">
          <div class="panel-header">
            <div class="date-selector">
              <span class="active">日</span>
              <span>月</span>
              <span>年</span>
            </div>
          </div>
          <div class="stats-content">
            <div class="stat-item">
              <div class="stat-icon">
                <img src="/images/gcnh.png" alt="工厂能耗" />
              </div>
              <div class="stat-content">
                <div class="stat-label">全厂综合能耗</div>
                <div class="stat-value">
                  <CountTo
                    :endVal="3.6"
                    suffix="tce"
                    :decimals="2"
                    :duration="2000"
                  />
                </div>
                <div class="stat-comparison">
                  <span class="trend-up">同比 5.00%▲</span>
                  <span class="trend-down">环比 -53.00%▼</span>
                </div>
              </div>
            </div>

            <div class="stat-item">
              <div class="stat-icon">
                <img src="/images/gcyd.png" alt="工厂用电" />
              </div>
              <div class="stat-content">
                <div class="stat-label">全厂用电总量</div>
                <div class="stat-value">
                  <CountTo :endVal="3600" suffix="kWh" :duration="2000" />
                </div>
                <div class="stat-comparison">
                  <span class="trend-up">同比 5.00%▲</span>
                  <span class="trend-down">环比 -53.00%▼</span>
                </div>
              </div>
            </div>

            <div class="stat-item">
              <div class="stat-icon">
                <img src="/images/gccb.png" alt="工厂成本" />
              </div>
              <div class="stat-content">
                <div class="stat-label">全厂用电成本</div>
                <div class="stat-value">
                  <CountTo
                    :endVal="2282.82"
                    suffix="元"
                    :decimals="2"
                    :duration="2000"
                  />
                </div>
                <div class="stat-comparison">
                  <span class="trend-down">同比 -5.00%▼</span>
                  <span class="trend-down">环比 -60.00%▼</span>
                </div>
              </div>
            </div>

            <div class="stat-item">
              <div class="stat-icon">
                <img src="/images/gcpf.png" alt="工厂排放" />
              </div>
              <div class="stat-content">
                <div class="stat-label">
                  <span class="co2-icon">CO₂</span>
                  排放总量
                </div>
                <div class="stat-value">
                  <CountTo
                    :endVal="1.09"
                    suffix="t"
                    :decimals="2"
                    :duration="2000"
                  />
                </div>
                <div class="stat-comparison">
                  <span class="trend-down">同比 0.06%▼</span>
                  <span class="trend-down">环比 -0.53%▼</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 车间电量分项统计 -->
        <div class="workshop-panel">
          <div class="panel-header">
            <h3>车间电量分项统计</h3>
            <div class="date-selector">
              <span class="active">日</span>
              <span>月</span>
              <span>年</span>
            </div>
          </div>
          <div class="workshop-content">
            <div ref="workshopChart" class="workshop-chart"></div>
            <div class="workshop-legend">
              <div class="legend-item">
                <span class="legend-color blue"></span>
                <span>1号主变柜G04变压器</span>
              </div>
              <div class="legend-item">
                <span class="legend-color dark-blue"></span>
                <span>2号主变柜G05变压器</span>
              </div>
              <div class="legend-item">
                <span class="legend-color purple"></span>
                <span>3号主变柜G06变压器</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import CountTo from "@/components/CountTo/index.vue";
import * as echarts from "echarts";

const consumptionChart = ref(null);
const powerChart = ref(null);
const workshopChart = ref(null);

// 初始化图表
const initCharts = () => {
  nextTick(() => {
    // 用电量柱状图
    if (consumptionChart.value) {
      const consumptionChartInstance = echarts.init(consumptionChart.value);
      const consumptionOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["2025-09-16", "2025-09-17"],
          top: 10,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "0时",
            "1时",
            "2时",
            "3时",
            "4时",
            "5时",
            "6时",
            "7时",
            "8时",
            "9时",
            "10时",
            "11时",
            "12时",
            "13时",
            "14时",
            "15时",
            "16时",
            "17时",
            "18时",
            "19时",
            "20时",
            "21时",
            "22时",
            "23时",
          ],
        },
        yAxis: {
          type: "value",
          max: 600,
          interval: 100,
        },
        series: [
          {
            name: "2025-09-16",
            type: "bar",
            data: [
              120, 200, 150, 80, 70, 110, 130, 180, 220, 190, 250, 300, 280,
              320, 290, 350, 380, 400, 350, 300, 250, 200, 150, 100,
            ],
            itemStyle: {
              color: "#87CEEB", // 浅蓝色
            },
          },
          {
            name: "2025-09-17",
            type: "bar",
            data: [
              100, 180, 130, 60, 50, 90, 110, 160, 200, 170, 230, 280, 260, 300,
              270, 330, 360, 380, 330, 280, 230, 180, 130, 80,
            ],
            itemStyle: {
              color: "#1E90FF", // 深蓝色
            },
          },
        ],
      };
      consumptionChartInstance.setOption(consumptionOption);
    }

    // 有功功率折线图
    if (powerChart.value) {
      const powerChartInstance = echarts.init(powerChart.value);
      const powerOption = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["2025-09-16", "2025-09-17"],
          top: 10,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "0时",
            "2时",
            "4时",
            "6时",
            "8时",
            "10时",
            "12时",
            "14时",
            "16时",
            "18时",
            "20时",
            "22时",
          ],
        },
        yAxis: {
          type: "value",
          max: 600,
          interval: 200,
        },
        series: [
          {
            name: "2025-09-16",
            type: "line",
            data: [200, 180, 220, 300, 350, 400, 380, 420, 450, 400, 350, 280],
            lineStyle: {
              color: "#87CEEB", // 浅蓝色
              type: "dashed",
            },
            itemStyle: {
              color: "#87CEEB",
            },
          },
          {
            name: "2025-09-17",
            type: "line",
            data: [180, 160, 200, 280, 330, 380, 360, 400, 430, 380, 330, 260],
            lineStyle: {
              color: "#1E90FF", // 深蓝色
              type: "dashed",
            },
            itemStyle: {
              color: "#1E90FF",
            },
            symbol: "circle",
            symbolSize: 6,
          },
        ],
      };
      powerChartInstance.setOption(powerOption);
    }

    // 车间电量饼图
    if (workshopChart.value) {
      const workshopChartInstance = echarts.init(workshopChart.value);
      const workshopOption = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c}%",
        },
        series: [
          {
            name: "变压器",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "50%"],
            data: [
              {
                value: 35,
                name: "1号主变柜G04变压器",
                itemStyle: { color: "#87CEEB" }, // 浅蓝色
              },
              {
                value: 40,
                name: "2号主变柜G05变压器",
                itemStyle: { color: "#1E90FF" }, // 深蓝色
              },
              {
                value: 25,
                name: "3号主变柜G06变压器",
                itemStyle: { color: "#8B5CF6" }, // 紫色
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      workshopChartInstance.setOption(workshopOption);
    }
  });
};

onMounted(() => {
  initCharts();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background: #f5f7fa;
  height: 100%;
  overflow-y: auto;
}

.top-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.card {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }

  .card-icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100px;
      height: 100px;
    }
  }

  .card-content {
    flex: 1;

    .card-title {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }

    .card-value {
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
  }
}

.middle-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.left-charts {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.chart-container {
  background: white;
  border-radius: 12px;
  padding: 24px 24px 24px 36px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: 400px;
  display: flex;
  flex-direction: column;

  .chart-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;

    h3 {
      font-size: 20px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0 0 8px 0;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        background: linear-gradient(135deg, #1e90ff, #87ceeb);
        border-radius: 2px;
      }
    }

    p {
      font-size: 14px;
      color: #666;
      margin: 0;
      font-weight: 500;
    }
  }

  .chart {
    flex: 1;
    min-height: 300px;
  }
}

.stats-panel,
.workshop-panel {
  background: white;
  border-radius: 12px;
  padding: 24px 24px 24px 36px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: 400px;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;

  h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: -12px;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background: linear-gradient(135deg, #1e90ff, #87ceeb);
      border-radius: 2px;
    }
  }
}

.date-selector {
  display: flex;
  gap: 4px;
  background: #f8f9fa;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid #e9ecef;

  span {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #6c757d;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-width: 40px;
    text-align: center;
    border: 1px solid transparent;

    &.active {
      background: linear-gradient(135deg, #1e90ff, #87ceeb);
      color: white;
      box-shadow: 0 4px 12px rgba(30, 144, 255, 0.3);
      transform: translateY(-1px);
      border-color: #1e90ff;
    }

    &:hover:not(.active) {
      background: white;
      color: #1e90ff;
      border-color: #e3f2fd;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

.stats-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
}

.stat-item {
  padding: 16px;
  background: #fafbfc;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 100px;

  &:hover {
    background: #f8f9fa;
    border-color: #e3f2fd;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;

    img {
      width: 48px;
      height: 48px;
    }
  }

  .stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .stat-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 6px;

    .co2-icon {
      background: linear-gradient(135deg, #1e90ff, #87ceeb);
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
    }
  }

  .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
    line-height: 1.1;
  }

  .stat-comparison {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-top: auto;

    .trend-up {
      color: #52c41a;
      display: flex;
      align-items: center;
      gap: 3px;

      &::before {
        content: "↗";
        font-size: 12px;
        font-weight: bold;
      }
    }

    .trend-down {
      color: #ff4d4f;
      display: flex;
      align-items: center;
      gap: 3px;

      &::before {
        content: "↘";
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
}

.workshop-content {
  flex: 1;
  display: flex;
  flex-direction: column;

  .workshop-chart {
    height: 200px;
    margin-bottom: 20px;
  }

  .workshop-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #666;

      .legend-color {
        width: 12px;
        height: 12px;
        border-radius: 50%;

        &.blue {
          background: #87ceeb; // 浅蓝色
        }

        &.dark-blue {
          background: #1e90ff; // 深蓝色
        }

        &.purple {
          background: #8b5cf6; // 紫色
        }
      }
    }
  }
}
</style>
